<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, render } from "vue"

const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties //vue3获取当前this

// 组件中使用，接收传参的
let propsData = defineProps({
  searchForm: {
    type: Object,
    default: {}
  },
  cameraSelect: {
    type: Array,
    default: []
  },
  algorithmSelect: {
    type: Array,
    default: []
  },
})
// 组件中使用，接收事件的
const emits = defineEmits(['search', 'algorithmChange', 'timeChange', 'cameraChange', 'clearCamera']);

const onSubmit = () => {
  emits('search', true);
}
function timeChange() {
  emits('search', true);
  emits('timeChange');
}
function cameraChange(val){
  emits('search', true);
  emits('cameraChange', val);
}
function clearCamera(){
  emits('clearCamera');
}
</script>

<template>
  <el-form :inline="true" :model="searchForm" class="form_search_table" style="display: flex;align-items: center;overflow: auto">
    <el-form-item label="Time">
      <el-date-picker
        v-model="searchForm.date"
        value-format="YYYY-MM-DD"
        placeholder="date"
        @change="timeChange"
        type="date"
        clearable
      />
    </el-form-item>
    <el-form-item label="Algorithm">
      <el-select
        v-model="searchForm.algorithm"
        placeholder="Please Select"
        :max-collapse-tags="1"
        @change="(val) => emits('algorithmChange', {}, val)"
        multiple
        collapse-tags
        collapse-tags-tooltip
        clearable
      >
        <el-option v-for="item in algorithmSelect" :key="item.id" :label="item.label" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="Camera">
      <el-select
        v-model="searchForm.cameraId"
        placeholder="Please select"
        @change="cameraChange"
        filterable
        clearable
        @clear="clearCamera"
      >
        <el-option v-for="item in cameraSelect" :key="item.id" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <!-- <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item> -->
  </el-form>
</template>